diff算法：
    概念：
        数据渲染 DOM操作的时候，是需要按照一定规则进行（速度要快）

        规则 diff算法

    核心理念： 真实DOM ---》 数据DOM（虚拟dom vnode）

        <div>aaaa</div>     {"div",{key:...},"aaa"}

    结论： 数据操作 比DOM 快好多

搭建测试环境：
    vm虚拟机搭建 --》真机就行

    npm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S
    配置文件：webPack.config.js 
       
    安装 snabbdom -S    npm install snabbdom -S

    安装到此结束-----

新老节点替换规则：
    1》新老节点不是同一个节点 （包括层级不一样，标签名字不一样）
       删除老节点，创建新节点 添加
      注意：替换节点：key唯一表示，用来确定更新前后 是否是同一标签
        是同一个标签，修改内容，提升效率
       
      老                新          最新
     container  div      h1       div


手写 diff算法： 生成虚拟DOM
    src/h.js  vnode.js

    h() : 生成虚拟DOM的节点  sel data children text elm
    patch 新旧虚拟节点 对比的
          如果有变化，新的虚拟节点生成DOM 放到页面上

    规则：
        新旧节点不同，新节点 去替换旧的节点，旧节点删除
        如果是同一个节点：也就是 div --》div 页面没有变化
    
    新旧节点是相同：
        如果新节点没有children ，不管就节点有没有子元素，直接替换文本
        如果新节点有children ， 2中情况：
             旧的没有子元素  直接替换
             旧的有子元素 ，
                比较两个元素： 循环比较的：

        新旧节点相同，新旧节点都有子节点*****
             旧前  新前  同行比较  两边指针同时++
             旧后  新后  最后一行  两边指针 ---》
             旧前  新后  交叉比较  旧 ++  新 --
             旧后  新前  交叉比较  旧--  新++
             以上都不满足：
                创建追加









    